<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="900px"
    center
    append-to-body
  >
    <div class="content-box">
      <el-table
        :data="treeData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        highlight-current-row
        default-expand-all
        :tree-props="{children: 'nodes', hasChildren: 'hasChildren'}"
        @current-change="handleNodeClick"
      >
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="data.code"
          label="编码"
        />
        <el-table-column
          prop="data.specification"
          label="规格"
        />
        <el-table-column
          prop="data.unit"
          label="单位"
        />
        <el-table-column
          prop="data.enable"
          label="禁用"
        />
        <el-table-column
          prop="data.remark"
          label="备注"
        />
        <el-table-column
          prop="data.economicYears"
          label="经济年限"
        />
        <el-table-column
          prop="data.residualRate"
          label="残值率"
        />
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'DeviceListModal',
  components: {

  },
  props: {
    title: {
      type: String,
      default: ''
    },
    showModal: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    apiObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      visible: false,
      name: '',
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      directCurrentNode: null,
      treeData: [] // 树列表
    }
  },
  computed: {
    show: {
      get() {
        return this.showModal
      },
      set(val) {
        this.$emit('update:showModal', val)
      }
    }
  },
  watch: {
    showModal: {
      handler(newData) {
        if (newData) {
          this.initTree()
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    confirm() {
      this.show = false
      const tmp = []
      tmp.push(this.directCurrentNode)
      this.$emit('getSelectedRows', tmp)
    },
    getSelectedRows(data) {

    },
    // 获取树结构目录
    initTree() {
      this.apiObj['tree']().then(res => {
        const { nodes } = res.data || {}
        this.treeData = nodes || []
      })
    },
    // 目录相关
    handleNodeClick(val) {
      this.directCurrentNode = val
    }
  }
}
</script>

<style lang="scss" scoped>
.com-form-title{
  font-size: 14px;
  font-weight: bold;
  line-height: 35px;
  color: #409EFF;
  border-bottom: 1px solid #dedede;
  margin-bottom: 6px;
}
::v-deep .content-box{
  overflow: hidden;
}
</style>
